<template>
  <div class="order">
    <ul class="order-nav" v-if="from!='credit'">
      <li :class="{'order-nav-item':true ,select:status==''}" @click="getOrderList('')">全部</li>
      <li :class="{'order-nav-item':true ,select:status=='1'}" @click="getOrderList('1')">待付款</li>
      <li :class="{'order-nav-item':true ,select:status=='2'}" @click="getOrderList('2')">待发货</li>
      <li :class="{'order-nav-item':true ,select:status=='3'}" @click="getOrderList('3')">待收货</li>
<!--      <li :class="{'order-nav-item':true ,select:status=='5'}" @click="getOrderList('5')">已完成</li>-->
<!--      <li :class="{'order-nav-item':true ,select:status=='8'}" @click="getOrderList('8')">待分享</li>-->
<!--      <li :class="{'order-nav-item':true ,select:status=='4'}" @click="getOrderList('4')">待评价</li>-->
    </ul>
    <ul class="order-item" :class="{normal_top:from!='credit'}">
      <li v-for="(value,index) in orderList" :key='index' style="margin-bottom:15px;background:#fff" @click="toOrderDetail(value)">
        <div class="order-item-header">
          <div class="order-item-num">订单号: {{value.order_num}}</div>
          <div class="order-item-status">{{value.statusType}}</div>
<!--          <div v-if="value.status=='3'" class="order-item-status">待收货</div>-->
<!--          <div v-if="value.status=='2'" class="order-item-status">待发货</div>-->
<!--          <div v-if="value.status=='4'" class="order-item-status">待评价</div>-->
<!--          <div v-if="value.status=='5'" class="order-item-status">已完成</div>-->
<!--          <div v-if="value.status=='6'" class="order-item-status">交易关闭</div>-->
<!--          <div v-if="value.status=='8'" class="order-item-status">已付款</div>-->
        </div>
        <div class="order-item-details" v-for="(value1,index1) in value.order_item" :key='index1'>
          <img :src="value1.goods_info.thumb_url" class="order-item-details-img" mode="aspectFill"/>
          <div class="order-item-details-name">
            <div class="details-name">
              <!-- <span class="details-tip">海外购</span> -->
              {{value1.goods_info.name}}
            </div>
            <div class="details-name">
              {{value1.goods_info.info}}
            </div>
            <div class="details-number">
              <div class="details-number-money" v-if="value.type!='integral'">￥{{value1.s_price}}</div>
              <div class="details-number-money" v-else>积分 {{value1.goods_info.exchange_integral}}</div>
              <div class="details-number-number">X{{value1.num}}</div>
            </div>
          </div>
        </div>

        <div class="order-item-header" v-if="from!='credit'">
          <div class="order-item-num1" v-if="value.type!='integral'">合计:￥{{value.s_amount}}</div>
          <div class="order-item-num1" v-else>共花积分: {{value.integral}}</div>
          <div class="order-item-status1">(含运费￥{{value.express_fee}})</div>
        </div>
        <div class="order-item-btn" v-if="from!='credit'">
          <div class="order-item-btn-pay" v-if="value.status=='1'" @click.stop="payment(value)">马上付款</div>
          <div class="order-item-btn-pay" v-if="value.status=='4'" @click.stop="toComment(value.order_num)">去评价</div>
          <div class="order-item-btn-canel" v-if="value.status=='1'" @click.stop="cancel(value.order_num)">取消订单</div>
          <div class="order-item-btn-pay" v-if="value.status=='3'" @click.stop="recieve(value.order_num)">确认收货</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>


  export default {
    components: {

    },

    data () {
      return {
        orderList:[],
        status:"",
        page:1,
        from:''//为credit，来自积分商城
      }
    },
    methods:{
      async getOrderList(status){
        wx.showLoading()
        var userToken=wx.getStorageSync('userToken')
        if(this.status!=status){
          this.orderList=[];
          this.page=0;
        }
        let res=await this.$request.getData('/order/getUserAllOrders',{user_token:userToken,status:status,page:this.page,limit:5})
        this.orderList=this.orderList.concat(res.data.data)
        this.status=status
        wx.hideLoading()
      },
      toComment(num){
        this.$currency.navigateTo(`/pages/comment/main?order_num=${num}`);
      },
      async payment(value){
        let _this=this
        var userToken=wx.getStorageSync('userToken')
        let res=await this.$request.postData('/payment/weChatPayment',{'order_num':value.order_num,user_token:userToken})
        let data=res.data.data
        wx.requestPayment({
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success() {
            _this.$currency.showToast('支付成功')
            setTimeout(()=>{
              wx.switchTab({url:'/pages/me/main'})
            },1500)
          },
          fail(res) {
            console.log('取消支付')
          }
        })
      },
      async cancel(order_num){
        let res=await this.$currency.showModal('取消订单','是否取消订单')
        if(res){
          var userToken=wx.getStorageSync('userToken')
          let data=await this.$request.postData('/order/cancelOrder',{order_num:order_num,user_token:userToken})
          this.$currency.showToast(data.data.message)
          this.orderList=[];
          this.page=0;
          this.getOrderList(this.status)
        }
      },
      async recieve(order_num){
        let res=await this.$currency.showModal('确认收货','是否确认收货')
        if(res){
          var userToken=wx.getStorageSync('userToken')
          let data=await this.$request.postData('/order/confirmReceipt',{order_num:order_num,user_token:userToken})
          this.$currency.showToast(data.data.message)
          this.orderList=[];
          this.page=0;
          this.getOrderList(this.status)
          this.$currency.navigateTo(`/pages/orderDetail/main?num=${order_num}`)
        }
      },
      toOrderDetail(value){
        if(value.type=='group'){
          this.$currency.navigateTo(`/pages/assembleDetail/main?order_num=${value.order_num}`)
        }else{
          this.$currency.navigateTo(`/pages/orderDetail/main?num=${value.order_num}`)
        }

      }
    },
    onShow(){
      this.orderList=[];
      this.page=0;
      this.getOrderList(this.status)
    },
    onReachBottom(){
      this.page++
      this.getOrderList(this.status)
    },
    onLoad(options){
      this.status=options.status==undefined?'':options.status
      if(options.status){
        this.status=options.status
      }
      this.from=options.from==undefined?'':options.from
    }
  }
</script>

<style scoped lang="scss" type="text/css">
  .normal_top{
    padding-top:60px !important;
  }
  .flexBetween{
    display:flex;
    justify-content:space-between;
  }
  .order{
    width:100%;
  &-item{
     background:#eee;
     padding-top:15px;
   }
  &-nav{
     position: fixed;
     top:0px;
     border-top:1px solid #eee;
     width:100%;
     height:40px;
     display:flex;
     background: #fff;
  &-item{
     flex:1;
     text-align:center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
  .select{
    color:red;
  }
  .select::after{
    content:'';
    height: 2px;
    margin-top:5px;
    width:40px;
    background: red;
  }
  }
  &-item-header{
     width:calc(100% - 40px);
     margin:0px 20px;
     border-bottom:1px solid #eee;
     line-height:40px;
     font-size: 14px;
   @extend .flexBetween;
  .order-item-num{
    line-height:40px;
  }
  .order-item-status{
    line-height:40px;
    color:red;
  }
  .order-item-num1{
    color:red
  }
  }
  &-item-details{
     width:calc(100% - 40px);
     margin:0px 20px;
     border-bottom:1px solid #eee;
     display:flex;
     height:100px;
  &-img{
     width:60px;
     height:60px;
     margin:20px 10px;
   }
  &-name{
     flex:1;
     margin-left:20px;
     overflow: hidden;
   }
  .details-name{
    margin-top:10px;
    height:24px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  .details-tip{
    width:60px;
    line-height:25px;
    border:1px solid black;
    border-radius:5px;
  }
  }
  .details-number{
    width:100%;
    line-height:25px;
  @extend .flexBetween;
  }
  }
  &-item-btn{
     width:100%;
     height:45px;
  .order-item-btn-canel{
    width:70px;
    line-height:25px;
    border:1px solid #eee;
    border-radius: 4px;
    text-align:center;
    float:right;
    margin:10px;
    font-size:12px;
  }
  .order-item-btn-pay{
  @extend .order-item-btn-canel;
    border:1px solid red !important;
    color:red;
    border-radius: 4px;

  }
  }
  }
</style>
